interview

home / developersection / interviews / explain the difference between one-way and two-way data binding with examples.

Ask Question
Ashutosh Kumar Verma

Developer

I'm a passionate content writer with a deep background in technology and web development. Skilled at writing engaging, well-researched, and SEO-friendly articles, I enjoy simplifying complex topics into clear and impactful writing that informs, inspires, and engages readers.

Follow
Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

28-Jun-2024

Knockout.js one-way vs two-way Data Binding

 

One-way data binding

One-way data binding involves binding data from a model (JavaScript) to a view (HTML). Changes to the model automatically update the view, but changes to the view do not necessarily update the model. This means that data flows in one direction, usually from the model to the UI.

Example-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- include bootstrap cdn -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <!-- inlcude knockout.js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
     <title>subscribe method Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h2>One-Way Data Binding Example</h2>
                <!-- bind the knockout data -->
                <p>Message: <span data-bind="text: message"></span></p>
            </div>
        </div>
    </div>

    <script>
    // ViewModel definition
    function ViewModel() {
        var self = this;

        // Observable for the message
        self.message = ko.observable('Hello, World!');
    }
    ko.applyBindings(new ViewModel());
    </script>
</body>
</html>


Two-Way Data Binding
The binary data binding not only updates the view when the model changes but also updates the model when the view changes. This means that changes to the model or view are automatically reflected in another.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- include bootstrap cdn -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <!-- inlcude knockout.js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
        <title>subscribe method Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h2>One-Way Data Binding Example</h2>
                <!-- two-way bind the knockout data -->
                <input type="text" data-bind="value: inputValue" class="form-control" />
                <p>Message: <span data-bind="text: inputValue"></span></p>
            </div>
        </div>
    </div>

    <script>
    // ViewModel definition
    function ViewModel() {
        var self = this;

        // Observable for the message
        self.inputValue = ko.observable('Hello, World!');
    }
    ko.applyBindings(new ViewModel());
    </script>
</body>
</html>


Key Differences

Direction of Data Flow

  • One-way binding Data flows from the model to the view. Changes to the model update the view.
  • Two-way binding Data flows in both directions between the model and the scene. Changes to the model update the view, and changes to the view update the model

Implementation Complexity

  • The one-way binding is easier to implement and understand because the concept is updated based solely on changes in the model.
  • Two-way binding requires additional methods to ensure that changes in state propagate back to the sample, which may require more robustness.

 

Also, Read: What are subscriptions in Knockout.js?

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy